<dl class="my-3 grid grid-cols-3 gap-5 sm:grid-cols-6">
    <%= for {title, value, url} <- [
        {"Users", @users_count, Routes.admin_user_path(@conn, :index)},
        {"Projects", @projects_count, Routes.admin_project_path(@conn, :index)},
        {"Organizations (non personal)", @organizations_count, Routes.admin_organization_path(@conn, :index) <> "?f-is_personal=false"},
        {"Paid organizations", @paid_count, nil},
        {"Clever Cloud addons", @clever_cloud_count, nil},
        {"Heroku addons", @heroku_count, nil},
    ] do %>
        <%= if url == nil do %>
            <div class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
                <dt class="truncate text-sm font-medium text-gray-100"><%= title %></dt>
                <dd class="mt-1 text-2xl font-semibold tracking-tight text-gray-100"><%= value %></dd>
            </div>
        <% else %>
            <a href={url} class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
                <dt class="truncate text-sm font-medium text-gray-100"><%= title %></dt>
                <dd class="mt-1 text-2xl font-semibold tracking-tight text-gray-100"><%= value %></dd>
            </a>
        <% end %>
    <% end %>
</dl>

<div class="my-3 grid grid-cols-3 gap-5">
    <div class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
        <canvas class="line-chart"><%= @connected_chart |> Jason.encode!() %></canvas>
    </div>
    <div class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
        <canvas class="line-chart"><%= @weekly_connected_chart |> Jason.encode!() %></canvas>
    </div>
    <div class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
        <canvas class="line-chart"><%= @monthly_connected_chart |> Jason.encode!() %></canvas>
    </div>
</div>

<div class="my-3 grid grid-cols-3 gap-5">
    <div class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
        <canvas class="line-chart"><%= @created_chart |> Jason.encode!() %></canvas>
    </div>
    <div class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
        <canvas class="line-chart"><%= @pro_events |> Jason.encode!() %></canvas>
    </div>
    <div class="overflow-hidden rounded-md bg-slate-800 px-4 py-5 shadow">
        <canvas class="line-chart"><%= @feature_events |> Jason.encode!() %></canvas>
    </div>
</div>

<div class="my-3 grid grid-cols-6 gap-3">
    <%= render "_interesting_users.html", conn: @conn, users: @last_active_users, fields: [{"Days", :active_days}, {"Events", :nb_events}, {"Last", :last_activity}], title: "Last active users", description: "Users by last activity (tracking event)" %>
    <%= render "_interesting_users.html", conn: @conn, users: @most_active_users, fields: [{"Days", :active_days}, {"Events", :nb_events}, {"Last", :last_activity}], title: "Most active users", description: "Users by most active days" %>
    <%= render "_interesting_users.html", conn: @conn, users: @lost_active_users, fields: [{"Days", :active_days}, {"Events", :nb_events}, {"Last", :last_activity}], title: "Lost active users", description: "Users with at least 5 days of activity and not seen since 30 days" %>
    <%= render "_interesting_users.html", conn: @conn, users: @lost_users, fields: [{"Days", :active_days}, {"Events", :nb_events}, {"Last", :last_activity}], title: "Lost users", description: "Users not seen since 30 days" %>
    <%= render "_interesting_users.html", conn: @conn, users: @plan_limit_users, fields: [{"Count", :nb_plan_limit}, {"Last", :last_plan_limit}], title: "plan_limit users", description: "Last users with a plan_limit event" %>
    <%= render "_interesting_users.html", conn: @conn, users: @billing_loaded_users, fields: [{"Count", :nb_billing_loaded}, {"Last", :last_billing_loaded}], title: "billing users", description: "Last users with a billing_loaded event" %>
</div>
<p class="mt-1 text-xs font-medium text-slate-500">*only looking at the 90 last days</p>
